<template>
    <div>
        <van-row style="margin: -2px 0;" >
            <section v-if="img.url">
                <div class="icon" @click="setLink" v-show="isEdit">
                    <i class="iconfont ali-setting"></i>
                </div>
                <img 
                    :style="fmtPx(img.grid)" 
                    :src="img.url"
                    >
            </section>
            <div v-else :style="boxClass.div" @click="upload">
                <i class="iconfont ali-add1" :style="boxClass.icon" />
            </div>
        </van-row>
        <section class="slider" v-show="isShow">
            <link-set ref="link" @close="isShow = false" :setTemp="img"></link-set>
        </section>
    </div>
</template>
<script>
import dingMApi from '@/utils/dingMApi'
import linkSet from '@/components/linkSet'
import { mapGetters } from 'vuex'

export default {
    data() {
        return {
            isShow: false
        }
    },
    components: {linkSet},
    props: {
        img: {
            type: Object,
            default(){
                return {
                    grid    : {},
                    url     : '',
                    link    : {}
                }
            }
        },
        boxClass: {//上传模板默认样式,不做cache
            type: Object,
            default(){}
        }
    },
    computed: {
        ...mapGetters(['isEdit']),
    },
    methods: {
        fmtPx(cssObj){
            let result = {
                width: cssObj.width + '%',
                height: cssObj.height + 'px'
            }
            return result;
        },
        async upload() {
            if(!this.isEdit){
                this.$toast('请到模板中去添加~');
                return ;
            }
            try {
                let imgs = await dingMApi.uploadImages(1);
                if(imgs.length > 0){
                    this.img.url = imgs[0]
                }
            } catch (error) {
                console.log(error, '上传报错')
            }
        },
        async setLink(){
            await this.$refs.link.clear();
            this.isShow = true
        }
    }
}
</script>
<style scoped>
.icon{
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: #909399;
}
.ali-setting{
    color: #FFF;
    font-size: 30px;
}
.slider{
    width: 90%;
    margin-left: 5%;
    position: fixed;
    top: 20%;
    left: 0;
    z-index: 200;
}
</style>
